// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

interface Props {}
interface State {}
class Index extends Component<Props, State> {
  state = {
    inputValue: "数据1",
    textareaValue: "数据2",
    selectValue: "2",
  };

  onUpdateForm = (
    e: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >
  ) => {
    // const data = '男' 或 '女'
    // const data: string = '男' 或 '女'
    // type Gender = "男" | "女";
    // const data2: Gender = "男2";
    this.setState({
      // inputValue: e.target.value,
      // textareaValue: e.target.value,
      // selectValue: e.target.value,
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <fieldset>
        <legend>14-受控组件封装</legend>

        <h1>input</h1>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.onUpdateForm}
          name="inputValue"
        />
        <h1>textarea</h1>
        <textarea
          value={this.state.textareaValue}
          onChange={this.onUpdateForm}
          name="textareaValue"
        ></textarea>
        <h1>select</h1>
        <select
          name="selectValue"
          id=""
          value={this.state.selectValue}
          onChange={this.onUpdateForm}
        >
          <option value="1">中国</option>
          <option value="2">北京</option>
          <option value="3">上海</option>
          <option value="4">中国台湾 🥚</option>
        </select>
      </fieldset>
    );
  }
}
export default Index;
